<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>简易随机试题</title>
    <script src="./js/vue@2.min.js"></script>
    <style>
      #app {
        display: flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
        /* align-items: center; */
        padding: 20px;
      }
      .tab-title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100px;
        font-size: 40px;
        font-weight: bold;
      }
      .tab-title > span {
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 100px;
        border: 1px solid #ccc;
        cursor: pointer;
      }
      .tab-title > span.active {
        color: #3a8ee6;
        border-color: #3a8ee6;
      }
      .left,
      .right,
      .answer {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
      }
      .left,
      .right {
        width: 100%;
      }
      h3 {
        margin: 0;
        margin-bottom: 10px;
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80px;
        margin-bottom: 24px;
        font-size: 34px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }
      .item:hover {
        background-color: #f0f0f0;
      }
      button {
        margin-top: 20px;
        padding: 20px 40px;
        border: none;
        border-radius: 4px;
        font-size: 36px;
        color: #fff;
        background-color: #409eff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }
      button:hover {
        background-color: #66b1ff;
      }
      button:active {
        background-color: #3a8ee6;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      }
      button:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="tab-title">
        <span :class="activeIndex==0?'active':''" @click="activeIndex=0"
          >加减练习</span
        >
        <span :class="activeIndex==1?'active':''" @click="activeIndex=1"
          >乘法练习</span
        >
      </div>
      <div v-show="activeIndex==0" class="left">
        <div v-for="(item, index) in leftItems" :key="index" class="item">
          <span>{{ item.a }}</span>
          <span>{{ item.operator }}</span>
          <span>{{ item.b }}</span>
          <span v-if="showLeftAnswer"> ={{ calculateAnswer(item) }}</span>
        </div>
        <button @click="generateLeftItems">出题</button>
        <button
          v-if="showLeftAnswer"
          @click="showLeftAnswer = false;leftItems=[]"
        >
          重置
        </button>
        <button
          v-if="!showLeftAnswer && leftItems.length"
          @click="showLeftAnswer = true"
        >
          显示答案
        </button>
      </div>
      <div v-show="activeIndex==1" class="right">
        <div v-for="(item, index) in rightItems" :key="index" class="item">
          <span>{{ item.a }}</span>
          <span>×</span>
          <span>{{ item.b }}</span>
          <span v-if="showRightAnswer"> ={{ calculateAnswer(item) }}</span>
        </div>
        <button @click="generateRightItems">出题</button>
        <button
          v-if="showRightAnswer"
          @click="showRightAnswer = false;rightItems=[]"
        >
          重置
        </button>
        <button
          v-if="!showRightAnswer && rightItems.length"
          @click="showRightAnswer = true"
        >
          显示答案
        </button>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          activeIndex: 0,
          leftItems: [],
          rightItems: [],
          showLeftAnswer: false,
          showRightAnswer: false,
        },
        methods: {
          // 生成左侧试题
          generateLeftItems() {
            this.showLeftAnswer = false;
            const operators = ['+', '-'];
            const items = [];
            for (let i = 0; i < 1; i++) {
              const a = Math.floor(Math.random() * 90000) + 10000;
              const b = Math.floor(Math.random() * 9000) + 1000;
              const operator =
                operators[Math.floor(Math.random() * operators.length)];
              items.push({
                a,
                b,
                operator,
              });
            }
            this.leftItems = items;
          },

          // 生成右侧试题
          generateRightItems() {
            this.showRightAnswer = false;
            const operator = '*';
            const items = [];
            for (let i = 0; i < 1; i++) {
              const a = Math.floor(Math.random() * 90) + 10;
              const b = Math.floor(Math.random() * 90) + 10;
              items.push({
                a,
                b,
                operator,
              });
            }
            this.rightItems = items;
          },

          // 计算答案
          calculateAnswer(item) {
            return item.operator === '+'
              ? item.a + item.b
              : item.operator === '-'
              ? item.a - item.b
              : item.a * item.b;
          },
        },
      });
    </script>
  </body>
</html>
